<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">  
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="params.keyword" class="sc-inp" @confirm="search">
						<view v-if="params.keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
					</view> 
					<view class="search-page">
						<view class="btn iconfont f-s40" @click="isShowSearch=true">&#xe6e9;</view>
						<view class="mask" v-if="isShowSearch" :style="{'height': 'calc(100% - '+(45)+'px','top':(45)+'px'}">
							<view class="search-body a-fadeinR">
								<view class="content-wrap">
									<view class="search-grid">
										<view class="label">仓库</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.storehouse==''}]" @click="params.storehouse=''">全部</view>
											<view :class="['item',{'active':params.storehouse==item.id}]" v-for="(item,index) in storehouse" :key="item.id" @click="params.storehouse=item.id;">{{item.sname}}</view> 
										</view>
									</view>			 
								</view>
								<view class="btn-bar">
									<view class="cancle" @click="isShowSearch=false">取消</view>
									<view class="confirm" @click="search">查询</view>
								</view>
							</view>
						</view>
					</view>
				</view> 			 
			</view>
		</view>
		<view class="body"> 
			
			<template>
				<template v-if="list.length>0"> 
					<view class="list-wrap">
						<view class="item" v-for="(item,index) in list" :key="index">
							<navigator :url="'/package_kucun/kucun-detail/kucun-detail?pid='+item.p_id+'&id='+item.id" hover-class="none">
								<view class="row-2 f-wb" style="color: #000;">
									<text>产品名称</text>
									<text>{{item.pname}}</text>
								</view>
								<view class="row-2">
									<text>更新时间</text>
									<text>{{item.last_update_time}}</text>
								</view>
								<view v-if="userInfo.role_id!=24" class="row-2">
									<text>{{item.sname}}</text>
									<text>{{item.p_count}}{{item.uname}}</text>
								</view>
								<view class="row-2">
									<text>换算</text>
									<text>{{item.hs_unit_count}}</text>
								</view>
							</navigator>
							<view class="row-2 btn-wrap">
								<navigator :url="'/package_kucun/yuding-xuqiu/yuding-xuqiu?pid='+item.p_id+'&id='+item.id" hover-class="none" class="btn">预订需求</navigator> 
								<navigator v-if="auth.indexOf(21)!=-1" :url="'/package_kucun/churuku-detail/churuku-detail?pid='+item.p_id+'&storehouseman='+item.storehouseman" hover-class="none" class="btn">出入库详情</navigator>
								<!-- <view class="btn" @click="del(item.id)">删除</view> -->
							</view>
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
					</view> 
				</template> 
				
				<c-empty v-else></c-empty>
			</template>
		</view>  
		<!-- <c-footer> 
			<view slot="content" class="add-btn" @click="add">{{type==1?'新增产品':'新增材料'}}</view>
		</c-footer> -->
	</view>
</template>


<script>
	export default {
		data() {
			return {
				isLogin:true, 
				userInfo:uni.getStorageSync('userInfo'),
				isIphoneX:getApp().globalData.isIphoneX,
				systemInfo:getApp().globalData.systemInfo,
				isShowSearch:false,
				type:'', 
				list:[],
				total:0,
				select_filter:{
					name:'消息',
					id:'0',
					key:'type'
				}, 
				loadingState:{
					default:false,
					loading:false,
					completed:false
				},
				params:{
					page:1,
					limit:15,
					cate_id: '',
					keyword:'',
					is_page:1,
					storehouse:''
				},
				auth:'',
				storehouse:{}
			}
		},
		onLoad(params) { 
			this.type=params.type;
			this.getprojectList();
			this.getauth();
			this.productstorehouse();
		},
		onShow() {
			
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				this.params.page++;
				this.getprojectList(); 			
			}	 
		},
		methods: { 
			async getauth(){
				let res=await this.$api.user_api.getauth();  
				if(res.data.code==200){    
					this.auth=res.data.data.join(','); 
				}
			}, 
			
			async productstorehouse(){
				let res=await this.$api.user_api.productstorehouse();   
				if(res.data.code==200){ 
					this.storehouse=res.data.data; 
				}
			}, 
			
			// 搜索关键词
			search() { 
				this.list = []; 
				this.params.page=1;
				this.isShowSearch=false;
				this.getprojectList(); 
			},
			
			// 清空关键词
			clearKeyword() {
				this.params.keyword = '';
				this.params.page=1; 
				this.list = [];
				this.getprojectList(); 
			},
			 
			async getprojectList(){ 
				let {page,limit,cate_id,keyword,storehouse}=this.params;
				let res=await this.$api.user_api.productlist({ 
					page,
					limit,
					selectType:1,
					search:keyword,
					storehouse
				});     
				if(res.data.code==200){  
					this.list=this.list.concat(res.data.data.list);	
					if(this.list.length==res.data.data.count){
						this.loadingState.completed=true;
					} 
				}
			}, 
			  
			 
		},
		computed:{
			list_update(){
				return this.$store.state.kucun_list;
			}
		},
		watch:{
			list_update(newer,older){ 
				console.log('更新')
				if(newer!=older){
					if(this.type==1){
						this.params.page=1;
						this.list=[];
						this.getprojectList(); 
					}
					if(this.type==2){
						this.params.page=1;
						this.list=[];
						this.getpartslist(); 
					}
				} 
			} 
		}
	}
</script>

<style lang="less" >
	.add-btn{
		height: 36px;
		line-height: 36px;
		width: 60%;
		margin: 5px auto;
		background: #1cab1b;
		border-radius: 8rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	} 
	 .search-grid{
	 	padding:20rpx;
	 	.label{
	 		margin-bottom: 20rpx;
	 		font-size: 26rpx;
	 		font-weight: bold;
	 	}
	 }
	 .status-list{
	 	display: flex;
	 	// justify-content: space-between;
	 	flex-wrap: wrap;
	 	.item{
	 		width: 31%;
	 		padding:10rpx 0;
	 		margin-bottom: 20rpx;
	 		margin-right: 10rpx;
	 		text-align: center;
	 		background: #f5f5f5;
	 		border-radius: 38rpx;
	 		font-size: 24rpx;
	 	}
	 	.active{
	 		background: #09f;
	 		color:#fff;
	 		font-weight: bold;
	 	}
	 }
	.list-wrap{
		padding:20rpx 0;
		.item{ 
			padding:20rpx; 
			background: #fff;  
			border-bottom:5rpx solid #e5e5e5; 
			.row-2{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				color: #939393;
				font-size: 30rpx;
			}
			.btn-wrap{
				padding:20rpx 50rpx; 
				border-top: 1rpx solid #e5e5e5;
				.btn{
					padding: 10rpx 20rpx;
					background: #1cab1b;
					border-radius: 8rpx;
					color: #fff;
				}
			}
			 
		}
	}
   
</style>
